<template>
	<view>
		<view class="header">
			<text class="title">GoEasy示例</text>
			<text class="title">聊天室（直播间）</text>
		</view>
		<view class="content">
			<input :class='nickname == "" ? "input-notice uni-input" : "uni-input"'
				:value="nickname"
				placeholder="请输入昵称"
				@input="onInputUserName">
			<view class="avatar-container">
				<view class="avatar-notice">
					<text>请选择头像</text>
					<text class="avatar-notice-info" v-if="selectedAvatar.imgUrl ==''">请选一个头像哦!!!</text>
				</view>
				<view class="avatar-box">
					<view
						:class="selectedAvatar.id == avatar.id ? 'avatar-box-item active' : 'avatar-box-item '"
						v-for="(avatar, key) in avatarList"
						:key="key"
						@click="onSelectAvatar(avatar)">
						<image :src="avatar.imgUrl"></image>
					</view>
				</view>
			</view>
			<view class="room-container">
				<text class="room-title">请选择聊天室</text>
				<view class="room-box">
					<text
						class="room-box-item"
						v-for="(room, key) in roomList"
						:key="room.roomId"
						@click="onSelectRoom(room)">{{room.name}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarList: [
					{id: '1', imgUrl: '../../../static/images/1.png'},
					{id: '2', imgUrl: '../../../static/images/2.png'},
					{id: '3', imgUrl: '../../../static/images/3.png'},
					{id: '4', imgUrl: '../../../static/images/4.png'},
					{id: '5', imgUrl: '../../../static/images/5.png'},
					{id: '6', imgUrl: '../../../static/images/6.png'},
					{id: '7', imgUrl: '../../../static/images/7.png'},
					{id: '8', imgUrl: '../../../static/images/8.png'}
				],
				roomList: [
					{roomId: "001", name: "程序员集散地"},
					{roomId: "002", name: "舌尖上的中国"},
					{roomId: "003", name: "驴友之家"},
					{roomId: "004", name: "球迷乐翻天"}
				],
				nickname: '',
				selectedAvatar: {
					imgUrl: '',
					id: ''
				},
				selectedRoom: {
					roomId: null,
					roomName: '',
				}

			}
		},
		onShow() {
			Object.assign(this.$data, this.$options.data());
		},
		methods: {
			onInputUserName(event) {// 输入用户名
				this.nickname = event.target.value;
			},
			onSelectAvatar(avtar) {//选择头像
				this.selectedAvatar = avtar;
			},
			onSelectRoom(room) {//登录
				if (this.selectedAvatar.imgUrl == "" || this.nickname == "") {
					uni.showToast({
						title: "请输入昵称，并选择头像",
						duration: 2000,
						icon: "none"
					});
					return
				}
				this.roomToken = {
					roomId: room.roomId,
					roomName: room.name,
					userId: (Math.random() * 1000).toString(),
					nickname: this.nickname,
					avatar: this.selectedAvatar.imgUrl
				};
				let roomTokenAsJsonString = JSON.stringify(this.roomToken)
				uni.navigateTo({
					url: "/pages/vue/chatroom/chatroom?roomToken=" + roomTokenAsJsonString
				})
			}
		}
	}
</script>

<style>
	.header {
		padding: 70rpx 0;
		font-size: 28rpx;
		line-height: 48rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		font-family: Microsoft YaHei UI;
	}

	.title {
		color: #D02129;
		font-weight: bold;
		font-size: 52rpx;
		line-height: 66rpx;
	}

	.content {
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 0 60rpx;
	}

	.uni-input {
		height: 72rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.1);
		outline: none;
		border-radius: 200rpx;
		padding: 16rpx 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		text-align: center;
	}

	.avatar-container {
		padding: 60rpx 0;
	}

	.avatar-notice {
		line-height: 56rpx;
		font-size: 28rpx;
	}

	.avatar-notice-info {
		padding-left: 20rpx;
		color: #D02129;
	}

	.avatar-box {
		height: 300rpx;
		display: flex;
		flex-wrap: wrap;

	}

	.avatar-box-item {
		height: 140rpx;
		width: 140rpx;
		box-sizing: border-box;
		margin: 8rpx;
	}

	.avatar-box-item image {
		height: 124rpx;
		width: 124rpx;
		background-color: #F0AD4E;
		border-radius: 35px;
	}

	.avatar-box .active {
		border: 8rpx solid red;
		box-sizing: border-box;
		border-radius: 129rpx;
	}

	.avatar-box .active image {
		border: 8rpx solid #fff;
		box-sizing: border-box;
	}

	.room-container {
		height: 370rpx;
	}

	.room-title {
		font-size: 30rpx;
		line-height: 38rpx;
	}

	.room-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.room-box-item {
		width: 288rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		box-sizing: border-box;
		background-color: #D02129;
		border-radius: 100rpx;
		color: #fff;
		margin-top: 32rpx;
		font-size: 26rpx;
	}

	.input-notice {
		border: 1px solid #D02129;
	}

	::-webkit-input-placeholder {
		color: #D02129;
	}

</style>
